<template>
  <el-card class="swiper-container">
    <div class="header">
      <el-input
        style="width: 200px; margin-right: 10px"
        placeholder="请输入订单号"
        v-model="orderNo"
        @change="handleOption"
        size="small"
        clearable
      />
      <el-select
        @change="handleOption"
        v-model="orderStatus"
        size="small"
        style="width: 200px; margin-right: 10px"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <el-button
        type="primary"
        size="small"
        icon="el-icon-plus"
        @click="handleConfig()"
        >配货完成</el-button
      >
      <el-button
        type="primary"
        size="small"
        icon="el-icon-plus"
        @click="handleSend()"
        >出库</el-button
      >
      <el-button
        type="primary"
        size="small"
        icon="el-icon-plus"
        @click="handleClose()"
        >关闭订单</el-button
      >
    </div>
    <el-table
      :load="loading"
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="orderNo" label="订单号" />
      <el-table-column prop="totalPrice" label="订单总价" />
      <el-table-column prop="" label="订单状态">
        <template #default="scope">
          <span>{{ $filters.orderMap(scope.row.orderStatus) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="" label="支付方式">
        <template #default="scope">
          <span v-if="scope.row.payType == 0">其他</span>
          <span v-if="scope.row.payType == 1">微信支付</span>
          <span v-if="scope.row.payType == 2">支付宝支付</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <a
            style="cursor: pointer; margin-right: 10px"
            @click="handleClose(scope.row.orderId)"
            >关闭订单</a
          >
          <a
            style="cursor: pointer; margin-right: 10px"
            @click="handleDetail(scope.row.orderId)"
            >订单详情</a
          >
          <!-- <router-link :to="{path:'/orderDetail',query:{id:cope.row.orderId}}">订单详情</router-link> -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="changePage"
    />
  </el-card>
</template>

<script>
import { reactive, toRefs, onMounted } from "vue";
import axios from "@/utils/axios";
import { useRouter } from "vue-router";
import { ElMessage } from 'element-plus';
export default {
  name: "Order",
  setup() {
    const router = useRouter();
    const state = reactive({
      loading: false,
      tableData: [],
      multipleSelection: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      orderStatus: "",
      orderNo: "",
      options: [
        {
          value: "",
          label: "全部",
        },
        {
          value: 0,
          label: "待支付",
        },
        {
          value: 1,
          label: "已支付",
        },
        {
          value: 2,
          label: "配货完成",
        },
        {
          value: 3,
          label: "出库成功",
        },
        {
          value: 4,
          label: "交易成功",
        },
        {
          value: -1,
          label: "手动关闭",
        },
        {
          value: -2,
          label: "超时关闭",
        },
        {
          value: -3,
          label: "商家关闭",
        },
      ],
    });
    onMounted(() => {
      getOrderList();
    });
    //获取列表方法
    const getOrderList = () => {
      state.loading = true;
      axios
        .get("/orders", {
          params: {
            pageNumber: state.currentPage,
            pageSize: state.pageSize,
            orderNo: state.orderNo,
            orderStatus: state.orderStatus,
          },
        })
        .then((res) => {
          console.log("res", res);
          state.tableData = res.list;
          state.total = res.totalCount;
          state.currentPage = res.currentPage;
          state.loading = false;
        });
    };
    const handleOption = () => {
      state.currentPage = 1;
      getOrderList();
    };
    //配货完成
    const handleConfig = () => {};
    // 出库
    const handleSend = () => {};
    // 关闭订单
    const handleClose = (id) => {
      let params
      if(id){
        params=id
      }else {
        if(!state.multipleSelection.length){
          ElMessage.error('请选择项')
          return
        }
        params=state.multipleSelection.map(i=>i.orderId)
      }
      axios.put('/orders/close',{
        ids:params
      }).then(()=>{
        ElMessage.success('关闭成功')
        getOrderList()
      })
    };
    const handleDetail = (id) => {
      router.push({
        path: "orderDetail",
        query: {
          id,
        },
      });
    };
    const changePage = () => {};
    const handleSelectionChange = (val) => {
      state.multipleSelection = val;
    };
    return {
      ...toRefs(state),
      handleOption,
      handleConfig,
      handleSend,
      handleClose,
      changePage,
      handleDetail,
      handleSelectionChange
    };
  },
};
</script>

<style>
</style>